<template>
    <div class="numberPad">
        <div class="number">{{output}}</div>
        <div class="buttons">
            <button @click="inputContent">1</button>
            <button @click="inputContent">2</button>
            <button @click="inputContent">3</button>
            <button id="del" @click="delChar">删除</button>
            <button @click="inputContent">4</button>
            <button @click="inputContent">5</button>
            <button @click="inputContent">6</button>
            <button id="clear" @click="clearInp">清空</button>
            <button @click="inputContent">7</button>
            <button @click="inputContent">8</button>
            <button @click="inputContent">9</button>
            <button id="confirm" @click="confirm">OK</button>
            <button @click="inputContent" id="zero">0</button>
            <button @click="inputContent">.</button>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component} from 'vue-property-decorator';
    @Component
    export default class NumberPad extends Vue {
        output:string = '0';
        inputContent(event:MouseEvent){
            const button = (event.target as HTMLButtonElement);
            const ch = button.textContent  as string;

            if(this.output.length === 16){return;}
            
            if(this.output.length == 0 && ch == '.'){
                this.output = '0.';
            }else if(this.output === '0' && ch !== '.'){
                this.output = ch;
            }else if(this.output.indexOf('.')>=0 && ch === '.'){
                return;
            }else{
                this.output += ch;
            }
            
        };
        delChar(){
            if(this.output.length>=1){
                const newOutput =  this.output.slice(0,-1);
                if(newOutput === ''){
                    this.output = '0';
                }else{
                    this.output = newOutput;
                }
            }else{
                return;
            }
            
        }
        clearInp(){
            this.output = '0';
        }

        confirm(){
            this.$emit('update:value',this.output);
            this.$emit('submit',this.output);
            this.output = '0';
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";
    .numberPad {
        @extend %clearFix;
        .number {
            background-color: $color-bgc;
            font-size: 28px;
            padding:11px 16px;
            height: 60px;
            text-align: right;
            // box-shadow: inset 0 5px 3px -5px rgba(0,0,0, 0.25),
            //     inset 0 -5px 3px -5px rgba(0,0,0, 0.2);   
        }
        .buttons {
            button {
                display: block;
                float: left;
                width: 25%;
                height: 60px;
                line-height: 60px;
                font-size: 28px;
                color:inherit;
                &#del,&#clear {
                    font-size: 16px;
                }
                &#confirm {
                    height: 120px;
                    float: right;
                }
                &#zero {
                    width: 50%;
                }
                $bg:#FFFAF0;
                &:nth-child(1){
                    background-color: $bg;
                }
                &:nth-child(2),&:nth-child(5){
                    background-color: darken($bg, 4%);
                }
                &:nth-child(3),&:nth-child(6),&:nth-child(9){
                    background-color: darken($bg, 2*4%);
                }
                &:nth-child(4),&:nth-child(7),&:nth-child(10){
                    background-color: darken($bg, 3*4%);
                }
                &:nth-child(8),&:nth-child(11),&:nth-child(13){
                    background-color: darken($bg, 4*4%);
                }
                &:nth-child(12){
                    background-color: darken($bg, 5*4%);
                }
                &:nth-child(14){
                    background-color: darken($bg, 6*4%);
                }
            }
        }

    }
</style>